<template>
  <div>
    <a-modal width="60%" v-model="showContent" title="设置轮播图文章" @ok="onSetContent">
      <ZgTinymce :height="400" v-model.trim="content"></ZgTinymce>
    </a-modal>
    <a-drawer width="50%" :closable="false" :visible="visible" @close="visible = false">
      <a-tabs v-if="!disabled" v-model="tab">
        <a-tab-pane :key="1" tab="管理图片"></a-tab-pane>
        <a-tab-pane :key="2" tab="预览"></a-tab-pane>
        <template #tabBarExtraContent>
          <ZgUpImg v-if="tab === 1 && list.length < 10" @upload="upload" showBtn></ZgUpImg>
        </template>
      </a-tabs>
      <div v-if="tab === 1">
        <div v-if="saving" class="tac pd10" style="color:#555;"><a-spin class="mr10" />正在保存序号...</div>
        <viewer class="viewer" :images="[]">
          <draggable
            v-model="list"
            handle=".sortHandler"
            chosenClass="chosen"
            forceFallback="true"
            group="module"
            animation="1000"
            @start="onStart"
            @end="onEnd">
            <transition-group>
              <div v-for="obj in list" :key="obj.id" class="wfull flx-s mb10 pd10" style="background:#f2f2f2">
                <i class="fa fa-arrows mr8 info cpt sortHandler"></i>
                <div class="w220 mr10">
                  <ZgImgHolder :height="80" isBack :src="obj.imgUrl"></ZgImgHolder>
                </div>
                <div class="wfull mr10">
                  <div class="mb10">
                    <a-input-group compact>
                      <a-button style="width: 30%"><span style="float: left;margin-left: -4px;">图片标题</span></a-button>
                      <a-input style="width: 70%" v-model.trim="obj.title"/>
                    </a-input-group>
                  </div>
                  <div>
                    <a-input-group compact>
                      <a-select style="width: 30%" v-model="obj.linkType">
                        <a-select-option :key="1">内部路由</a-select-option>
                        <a-select-option :key="2">外部地址</a-select-option>
                        <a-select-option :key="3">富文本</a-select-option>
                        <a-select-option :key="4">通知公告</a-select-option>
                      </a-select>
                      <a-button @click="toSetContent(obj)" style="width: 70%" v-if="obj.linkType===3" type="">点击编辑轮播图文章</a-button>
                      <a-input style="width: 70%" v-if="obj.linkType===2" v-model.trim="obj.linkUrl" placeholder="http://"/>
                      <a-select style="width: 70%" v-if="obj.linkType===1" v-model="obj.linkUrl">
                        <a-select-option key="/pages/ann/list">公告列表</a-select-option>
                        <a-select-option key="/pages/work/todo">待办列表</a-select-option>
                        <a-select-option key="/pages/work/data">数据看板</a-select-option>
                        <a-select-option key="/pages/mine/collect">我的收藏</a-select-option>
                        <a-select-option key="/pages/mine/feedback/index">意见反馈</a-select-option>
                      </a-select>
                      <div class="flx-s" style="width: 70%" v-if="obj.linkType===4">
                        <a-input v-model.trim="obj.annTitle" placeholder="输入通知公告标题">
                          <div v-if="false" class="w140" slot="addonBefore" placeholder="通知公告编码">{{ obj.annId==='0'?"无数据":obj.annId }}</div>
                          <div class="cpt" slot="addonAfter" @click="searchAnn(obj)">
                            <i class="fa fa-search"/>
                          </div>
                        </a-input>
                      </div>
                    </a-input-group>
                  </div>
                </div>
                <div class="w120">
                  <a-button type="primary" class="mb10" @click="save(obj)">保存</a-button>
                  <a-button type="" @click="del(obj)">删除</a-button>
                </div>
              </div>
            </transition-group>
          </draggable>
        </viewer>
      </div>
      <div v-else>
        <ZgBanner :width="480" :height="300" :imgs="imgs"></ZgBanner>
      </div>
    </a-drawer>
    <a @click="onClick">{{ list.length }}个图片</a>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    bannerId: {
      type: String,
      default: '0'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: false,
      saving: false,
      tab: this.disabled ? 2 : 1,
      list: [],
      item: null,
      content: '',
      showContent: false
    }
  },
  mounted () {
    this.search()
  },
  computed: {
    imgs () {
      return this.list.map(t => {
        return { path: t.imgUrl }
      })
    }
  },
  watch: {
    bannerId () {
      this.search()
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    close () {
      this.visible = false
    },
    onClick () {
      this.search()
      this.visible = true
    },
    search () {
      this.$http.get('/zg-system/banner/img/list', {
        bannerId: this.bannerId
      }, data => {
        this.list = data.map(t => {
          t.annTitle = ''
          t.annId = '0'
          if (t.linkType === 4) {
            if (t.content) {
              const arr = t.content.split(':')
              if (arr.length > 0) {
                t.annTitle = arr[1]
                t.annId = arr[0]
              }
            }
          }
          return t
        })
      })
    },
    searchAnn (obj) {
      if (obj.annTitle.length === 0) {
        this.$warning({ title: '请输入公告标题!' })
        return
      }
      this.$http.get('/base/announce/findByTitle', {
        title: obj.annTitle
      }, data => {
        if (data.length > 0) {
          this.$info({ title: '查询成功！' })
          obj.annId = data[0].id
          obj.annTitle = data[0].title
          obj.content = data[0].id + ':' + data[0].title
        } else {
          this.$info({ title: '未找到相关内容！' })
        }
      })
    },
    upload (t) {
      let maxSort = 0
      this.list.forEach(t => {
        if (t.sort && t.sort > maxSort) {
          maxSort = t.sort
        }
      })
      this.$http.post('/zg-system/banner/img/add', {
        bannerId: this.bannerId,
        imgUrl: t.path,
        title: t.name,
        sort: maxSort + 1
      }, () => {
        this.search()
      })
    },
    save (obj) {
      if (obj.linkType === 4 && obj.annId === '0') {
        this.$warning({ title: '请选择一个通知公告！' })
        return
      }
      const param = {
        id: obj.id,
        title: obj.title,
        linkType: obj.linkType,
        linkUrl: obj.linkUrl,
        content: obj.content
      }
      this.$http.post('/zg-system/banner/img/save', param, () => {
        this.$info({ title: '操作成功' })
      })
    },
    del (obj) {
      this.confirm(() => {
        this.$http.post('/zg-system/banner/img/del', [obj.id], () => {
          this.search()
        })
      })
    },
    toSetContent (obj) {
      this.item = obj
      this.content = obj.content
      this.showContent = true
    },
    onSetContent () {
      if (this.content.length === 0) {
        this.$warning({ title: '请输入内容' })
        return
      }
      this.item.content = this.content
      this.showContent = false
      this.$info({ title: '设置轮播图文章成功，请保存！' })
    },
    onStart () { },
    onEnd () {
      this.saving = true
      setTimeout(() => {
        this.saving = false
        const result = this.list.map((t, i) => {
          return t.id + '_' + i
        })
        this.$http.post('/zg-system/banner/img/sort', {
          sortStr: result.join(',')
        }, () => {
          this.search()
        })
      }, 200)
    }
  }
}
</script>

<style lang="scss" scoped></style>
